<template>
    <div class="layout-container">
        <el-container>
            <el-header>
                <div class="header-left">
                    <img src="@/assets/img/logo.jpg" alt="logo" class="logo">
                    <span class="system-name">中大超市库存管理系统</span>
                </div>
                <div class="header-right">
                    <el-dropdown trigger="hover">
                        <span class="user-greeting"><el-icon><User/></el-icon>{{ username }}，您好</span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="userStore.logout">
                                    <el-icon><CircleCloseFilled/></el-icon>
                                    <span>退出登录</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside class="aside-menu">
                    <el-menu :default-active="activeIndex" @select="handleSelect" text-color="beige" active-text-color="#efc981" background-color="transparent">
                        <el-menu-item index="home">
                            <el-icon><House/></el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-menu-item index="personal">
                            <el-icon><User/></el-icon>
                            <span>个人信息</span>
                        </el-menu-item>
                        <el-menu-item index="goods">
                            <el-icon><Document/></el-icon>
                            <span>商品信息管理</span>   
                        </el-menu-item>
                        <el-menu-item index="purchase">
                            <el-icon><Box/></el-icon>
                            <span>进货管理</span>       
                        </el-menu-item>
                        <el-menu-item index="sales">
                            <el-icon><Money/></el-icon>
                            <span>销售管理</span>
                        </el-menu-item>
                        <el-menu-item index="stock">
                            <el-badge :offset="[10,20]" value="new" type="danger" v-if="stockCountStore.outOfStockCount > 0 || stockCountStore.lowStockCount > 0">
                                <el-icon><Goods/></el-icon>
                                <span>库存管理</span>
                            </el-badge>
                            <div v-else>
                                <el-icon><Goods/></el-icon>
                                <span>库存管理</span>
                            </div>
                        </el-menu-item>
                        <el-menu-item index="employee" v-if="userStore.isSuperAdmin">
                            <el-icon><UserFilled/></el-icon>
                            <span>员工信息管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <slot></slot>
                    </el-main>
                </el-container>
            </el-container>
            <el-footer>
                <div class="footer-content">
                    <span>&copy;中大超市库存管理系统版权所有</span>
                    <span> | </span>
                    <span>联系我们: support@sysu.com</span>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { Box, CircleCloseFilled, Document, Goods, House, Money, User, UserFilled } from '@element-plus/icons-vue';
import { useUserStore } from '@/stores/user';
import { useStockCountStore } from '@/stores/stockCount';

const activeIndex = ref("home")
const router = useRouter()
const userStore = useUserStore()
const stockCountStore = useStockCountStore()
const username = localStorage.getItem('username')

// 监听路由变化
watch(
    () => router.currentRoute.value.name,
    (newVal) => {
        activeIndex.value = newVal as string;
    }
);

// 处理菜单选择
function handleSelect(index: string){
    activeIndex.value = index
    router.push({name: index})
}

</script>

<style scoped>
.layout-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.header-left {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
}
.logo {
    width: 50px;
    height: auto;
    margin-right: 10px;
}
.system-name {
    font-size: 32px;
    font-weight: bold;
    background:linear-gradient(220.55deg, #00B960 0%, #00552C 100%);
    background-clip: text;
    color: transparent;
}
.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.user-greeting {
    font-size: 18px;
    margin-right: 20px;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
    color: #efc981;
}
.user-greeting:hover {
    background:linear-gradient(220.55deg, #D7003A 0%, #19087E 100%);
}
.aside-menu {
    /* background-color: #2d5464; */
    background:linear-gradient(220.55deg, #FFBB89 0%, #7B6AE0 100%);
    width: "15%" ;
    font-size: 16px; /* 调整菜单栏字体大小 */
}
.el-menu-item.is-active {
    background:linear-gradient(220.55deg, #24CFC5 0%, #001C63 100%);
}
.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: antiquewhite;
}
</style>